<template>
  <div id="right-part">
    <div class="name">{{ songName }}</div>
    <div class="second-line">
      <div class="album">专辑:<span>{{ album }}</span></div>
      <div class="singer-name">
        歌手:<span v-for="(item, index) in singers" :key="index">{{ item }}</span>
      </div>
      <!-- <div class="source">来源:</div> -->
    </div>
    <lyric :lyric="lyric" class="lyric"/>
  </div>
</template>

<script>
import { handleLyric } from 'utils'
import Lyric from 'components/content/lyric/Lyric.vue'

export default {
  name: 'RightPart',
  components: {
    Lyric
  },
  data () {
    return {
      lyric: []
    }
  },
  computed: {
    // 1. 返回歌曲数据
    songData () {
      return this.$store.state.playInfo.songData
    },
    // 2. 返回歌曲名字
    songName () {
      return this.songData && this.songData.name
    },
    album () {
      return this.songData && this.songData.al.name
    },
    singers () {
      // return this.Data.
      if (!this.songData) return ''
      const singer = []
      this.songData.ar.forEach(value => {
        singer.push(value.name)
      })
      return singer
    }
  },
  watch: {
    songData () {
      this.getLyric()
    }
  },
  methods: {
    async getLyric () {
      const result = await this.$http.get('/lyric', { params: { id: this.songData.id } })
      if (result.status !== 200 || result.data.code !== 200) return this.$messgae.info('获取歌词失败')
      // 获取成功
      // console.log(result.data)
      if (result.data.lrc) {
        this.lyric = handleLyric(result.data.lrc.lyric)
      } else {
        this.lyric = [{ lyric: '纯音乐' }]
      }
    }
  }
}
</script>

<style scoped lang="less">
#right-part {
  user-select: none;
  width: 50%;
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  .name {
    color: #222526;
    margin: 16px 0;
    font-size: 22px;
  }
  .second-line {
    display: flex;
    white-space: nowrap;
    > div {
      color: #3f4447;
      font-size: 13px;
      text-overflow: ellipsis;
      overflow: hidden;
      width: 40%;
      padding-right: 10px;
      > span {
        cursor: pointer;
        color: #396bb1;
        padding: 0 10px;
        &:hover {
          color: #0849ab;
        }
      }
    }
    .singer-name {
      span {
        position: relative;
        &:nth-last-of-type(n+2)::after {
          content: "/";
          color: #4a4d4e;
          position: absolute;
          right: -3px;
          pointer-events: none;
        }
      }
    }
  }
}
</style>
